<template>
    <view class="address-page">
      <view class="header">
        <view class="back-arrow" @click="back"></view>
        <view class="title">收货地址</view>
      </view>
      <view class="address-list">
        <view v-for="address in addressList" :key="address.id" class="address-item">
          <view :class="['label', getLabelClass(address.defaults)]">{{ getLabelText(address.defaults) }}</view>
          <view class="details">
            <view class="address">{{ address.province }}{{ address.city }}{{ address.area }}{{ address.detailsAddr }}</view>
            <view class="contact">{{ address.contacts }} 先生 {{ address.phone }}</view>
          </view>
          <view class="actions">
            <view class="right-arrow"></view>
            <button class="delete-button" @click="deleteAddress(address.id)">删除</button>
          </view>
        </view>
        <view v-if="addressList.length === 0" class="no-address">
          暂无收货地址
  		</view>
	  </view>
    </view>
    <view class="add-address-button" @click="goToAddAddress">添加地址</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import baseUrl from '@/untils/urlConfig'; // Assuming urlConfig is in @/untils based on car.vue
import unirequest from '@/untils/unirequest';

const addressList = ref([]);

const fetchAddresses = async () => {
  try {
    const response = await unirequest({
      url: baseUrl + '/gas/address/list', // Using the updated API path
      method: 'GET'
	  
    });

    if (response.statusCode === 200 && response.data && response.data.code === 200) {
      addressList.value = response.data.rows.map(address => ({
        id: address.id,
        province: address.province,
        city: address.city,
        area: address.area,
        detailsAddr: address.detailsAddr,
        contacts: address.contacts,
        phone: address.phone,
        defaults: address.defaults
      })) || [];
    } else {
      const errorMessage = response.data && response.data.msg ? response.data.msg : '获取收货地址失败';
       console.error('获取收货地址失败:', response);
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
};

const getLabelText = (defaults) => {
  switch (defaults) {
    case 1:
      return '家';
    case 2:
      return '公司';
    case 3:
      return '学校';
    default:
      return '其他';
  }
};

const getLabelClass = (defaults) => {
   switch (defaults) {
    case 1:
      return 'home';
    case 2:
      return 'company';
    case 3:
      return 'school';
    default:
      return 'other';
  }
};

onMounted(() => {
  fetchAddresses();
});

const deleteAddress = async (id) => {
  try {
    const response = await unirequest({
      url: baseUrl + '/gas/address/' + id,
      method: 'DELETE'
    });

    if (response.statusCode === 200 && response.data && response.data.code === 200) {
      uni.showToast({
        title: '删除成功',
        icon: 'success',
      });
      addressList.value = addressList.value.filter(address => address.id !== id);
    } else {
      const errorMessage = response.data && response.data.msg ? response.data.msg : '删除失败';
      uni.showToast({
        title: errorMessage,
        icon: 'none',
      });
      console.error('删除失败:', response);
    }
  } catch (error) {
    console.error('请求失败:', error);
    uni.showToast({
      title: '网络请求失败',
      icon: 'none',
    });
  }
};

const goToAddAddress = () => {
  uni.navigateTo({
    url: '/pages/address/addAddress'
  });
};
const back = () => {
  uni.navigateBack();
};
</script>

<style scoped>
.address-page {
  background-color: #f7f7f7; /* Soft grey background */
  min-height: 100vh;
  padding-top: 50px; /* Increased padding for fixed header */
  padding-bottom: 70px; /* Increased padding for fixed bottom button */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Modern font stack */
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px; /* Increased padding */
  background-color: #4285f4; /* Google Blue */
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.back-arrow {
  width: 12px; /* Smaller arrow */
  height: 12px; /* Smaller arrow */
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  cursor: pointer;
}

.title {
  font-size: 18px;
  font-weight: 600; /* Slightly bolder */
  color: #fff;
  margin-right: 38%;
}

.address-list {
  padding: 0px 15px; /* Adjusted padding */
}

.address-item {
  background-color: #fff;
  border-radius: 8px; /* Rounded corners */
  margin-bottom: 12px; /* Space between items */
  padding: 15px; /* Inner padding */
  display: flex;
  align-items: center; /* Re-align items to center for delete button */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}

.label {
  padding: 4px 8px; /* Adjusted padding */
  border-radius: 4px; /* More rounded corners */
  color: #fff;
  margin-right: 12px; /* Increased margin */
  font-size: 11px; /* Smaller font */
  flex-shrink: 0;
  text-transform: uppercase; /* Uppercase text */
  font-weight: 600; /* Bolder label text */
}

.label.home {
  background-color: #fbbc05; /* Google Yellow */
}

.label.company {
  background-color: #34a853; /* Google Green */
}

.label.school {
  background-color: #ea4335; /* Google Red */
}

.label.other {
   background-color: #999; /* Grey for other labels */
}

.details {
  flex-grow: 1;
  margin-right: 12px; /* Increased space before arrow */
}

.address {
  font-size: 15px; /* Slightly smaller address font */
  color: #333;
  margin-bottom: 4px; /* Reduced margin */
  line-height: 1.5;
}

.contact {
  font-size: 13px; /* Slightly smaller contact font */
  color: #777; /* Darker grey */
}

.right-arrow {
  width: 8px; /* Smaller arrow */
  height: 8px; /* Smaller arrow */
  border-top: 2px solid #bbb; /* Lighter grey arrow */
  border-right: 2px solid #bbb; /* Lighter grey arrow */
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: 4px; /* Align with the first line of address */
}

.actions {
    display: flex;
    align-items: center;
    margin-left: 10px; /* Space between details and actions */
}

.delete-button {
	background-color: #ea4335;
    color: white; /* Google Red for delete */
    margin-left: 10px; /* Space between arrow and delete button */
    font-size: 14px;
    cursor: pointer;
	border-radius: 30px;
	width: 60px;
}

.no-address {
  text-align: center;
  padding: 30px;
  color: #999;
  font-size: 16px;
}

.add-address-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #4285f4; /* Google Blue */
  color: #fff;
  text-align: center;
  padding: 18px 0; /* Increased padding */
  font-size: 18px;
  font-weight: 600; /* Bolder text */
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Subtle top shadow */
  border: none; /* Remove default button border */
}

.add-address-button:active { /* Add active state for button press */
    background-color: #3367d6; /* Darker blue on press */
}

</style> 